<template>
  <view class="container-gray" style="padding-bottom: 100upx;" v-if="topicList.length > 0">
    <view v-for="(topic,index) in topicList" :key="index">
      <view class="type-box">
        <text v-if="topic.quesType == 1">单选题</text>
        <text v-if="topic.quesType == 2">多选题</text>
        <text v-if="topic.quesType == 3">判断题</text>
      </view>

      <view class="topic-box">
        <!-- <rich-text v-if='topic.quesInfo' :nodes="topic.quesInfo" class="questions"></rich-text>
        <view v-if="topic.info">{{topic.info}}</view>-->
        <rich-text v-if="topic.info" :nodes="topic.info" class="questions"></rich-text>
        <view class="answer">
          <view
            class="options"
            v-for="(item,key) in topic.options"
            :key="index"
            @click="checkOptions(index,key)"
            v-if="item.option"
          >
            <view v-if="show">
              <view
                v-if="topic.quesType == 3"
                class="stide"
                :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')"
              >
                <image
                  :src="item.checked?(item.status?'/static/icon/correct.png':'/static/icon/error.png'):(item.status?'/static/icon/correct.png':'')"
                  style="width: 60upx;height: 60upx;"
                />
              </view>
              <view
                v-else
                class="stide"
                :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')"
              >
                <view v-if="!item.checked">{{item.key}}</view>
                <image
                  v-else
                  :src="item.status?'/static/icon/correct.png':'/static/icon/error.png'"
                  style="width: 60upx;height: 60upx;"
                />
              </view>
            </view>
            <view v-else>
              <view
                v-if="topic.quesType == 3"
                class="stide"
                :class="item.checked === true?'isCheck':''"
              ></view>
              <view v-else class="stide" :class="item.checked === true?'isCheck':''">{{item.key}}</view>
            </view>
            <view style="flex:1">{{item.option}}</view>
          </view>
        </view>
        <view v-if="show" style="margin-top: 20upx;">
          <view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
          <view class="flex-box">
            <view style="flex: 1;">
              正确答案：
              <text style="color: #02A8F4;">{{topic.answ}}</text>
            </view>
            <view style="flex: 1;">
              您的答案：
              <text style="color: #02A8F4;">{{topic.selfAnsw?topic.selfAnsw:'未选择'}}</text>
            </view>
          </view>
        </view>
        <view hidden="true">{{count}}</view>
      </view>
    </view>

    <view class="footer" v-if="!show">
      <button type="primary" class="primary footer-btn" @click="submitTopic()">提交</button>
    </view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
var time = 0
export default {
  data() {
    return {
      trainId: null,
      topicList: [],
      count: 0,
      show: false
    }
  },
  onLoad(options) {
    this.trainId = options.id
    this.getTopic(options.id)
  },
  methods: {
    // 获取每日一题
    getTopic() {
      const params = {
        trainId: this.trainId
      }
      post_md5('/train/getTrainQues', params).then(res => {
        this.topicList = res.data
      })
    },

    // 选择选项
    checkOptions(index, key) {
      if (!this.show) {
        this.count++
        let data = this.topicList[index].options
        if (this.topicList[index].quesType === 2) {
          data[key].checked = !data[key].checked
        } else {
          for (let i = 0; i < data.length; i++) {
            if (i === key) {
              data[i].checked = true
            } else {
              data[i].checked = false
            }
          }
        }
      }
    },

    // 提交
    submitTopic() {
      let data = []
      for (let i in this.topicList) {
        let topic = this.topicList[i]
        const options = {
          selfAnsw: '',
          userId: uni.getStorageSync('userId'),
          quesId: topic.quesId,
          trainDataId: this.trainId,
          sort: i
        }
        if (topic.quesType == 2) {
          for (let j in topic.options) {
            if (topic.options[j].checked) {
              options.selfAnsw += topic.options[j].key
            }
          }
        } else {
          for (let j in topic.options) {
            if (topic.options[j].checked) {
              options.selfAnsw = topic.options[j].key
              break
            }
          }
        }
        // if(params.answ == [] || params.answ == '' || params.answ == undefined){
        // 	uni.showToast({
        // 		title:'请选择答案后提交',
        // 		icon:'none'
        // 	})
        // 	return false
        // }
        data.push(options)
      }
      let params = {
        trainDataQuesJson: JSON.stringify(data)
      }
      post_md5('/train/commitTrainDataQues', params).then(res => {
        this.getAnswer()
        this.show = true
      })
    },

    // 获取答题情况
    getAnswer() {
      const params = {
        userId: uni.getStorageSync('userId'),
        trainDataId: this.trainId
      }
      post_md5('/train/getTrainDataQuesResultInfo', params).then(res => {
        this.topicList = res.data
        for (let i in this.topicList) {
          let topic = this.topicList[i]

          // 将正确答案由String转为Array
          topic.rightAnswer = []
          for (let j in topic.answ) {
            topic.rightAnswer.push(topic.answ.charAt(j))
          }

          // 删除空选项
          // for (let j in topic.options) {
          // 	if (topic.options[j].option == "") {
          // 		topic.options.splice(i, 1)
          // 	}
          // }

          if (topic.selfAnsw !== '') {
            for (let j in topic.options) {
              for (let k in topic.rightAnswer) {
                if (topic.quesType == 3) {
                  if (topic.options[j].option == topic.rightAnswer[k]) {
                    topic.options[j].status = true
                    break
                  }
                } else {
                  if (topic.options[j].key == topic.rightAnswer[k]) {
                    topic.options[j].status = true
                    break
                  }
                }
                topic.options[j].status = false
              }
            }
          }
        }
      })
    }
  }
}
</script>

<style>
.type-box {
  padding: 15upx 20upx;
  margin-bottom: 1px;
  margin-top: 1px;
  background: #ffffff;
  line-height: 70upx;
}

.topic-box {
  background: #ffffff;
  padding: 20upx;
  font-size: 28upx;
  font-weight: normal;
  color: #333333;
  line-height: 60upx;
}

.mistake {
  background: #ec6663;
  border: 1px solid #ec6663;
  color: #ffffff;
}

.correct {
  background: #3ed325;
  color: #ffffff;
  border: 1px #3ed325 solid;
}

.footer {
  height: 98upx;
  font-size: 28upx;
  background: #02a8f4;
}
</style>
